<template >
    <div class="add-area">
      <div class="text">
        <el-icon>
          <Tickets />
        </el-icon>
        <span>数据列表</span>
      </div>
    </div>
    <el-table :data="List" border style="width: 100%" cell-class-name="align-c">
    <el-table-column prop="id" label="编号" align="center" width="180px"/>
    <el-table-column prop="name" label="秒杀时间段名称" align="center"/>
    <el-table-column prop="startTime" label="每日开启时间" align="center">
      <template #default="{ row }">
        {{ formateDate(row.startTime) }}
      </template>
    </el-table-column>
    <el-table-column align="center" prop="endTime" label="每日结束时间" >
      <template #default="{ row }">
        {{ formateDate(row.endTime) }}
      </template>
    </el-table-column>
    <el-table-column prop="productCount" label="商品数量" align="center" />
    <el-table-column label="操作" align="center"  width="180px">
      <template #default="{ row }">
          <el-button text type="primary"  size="small" @click="router.push('/sms/flashProductRelation?flashPromotionId='+route.query.flashPromotionId+'&flashPromotionSessionId='+row.id)">商品列表</el-button>
      </template>
    </el-table-column>>
  </el-table>
</template>
<script setup lang="ts">
  import { Search,Tickets } from "@element-plus/icons-vue"
import {getFlashSessionSelectList} from './api'
import {ref} from 'vue'
import { formateDate } from '@/utils'
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from "vue-router";
const router=useRouter()
const route = useRoute()

const List=ref<SelectSession>()
getFlashSessionSelectList(parseInt(route.query.flashPromotionId as string)).then(res=>{
if(res.code===200){
  List.value=res.data
}
})


</script>
<style lang="less" scoped>
.searchj-box {
  box-shadow: 0 0 4px #ccc;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;

  .row {
    padding: 20px 0;
    display: flex;

    &:first-child {
      justify-content: space-between;
    }

    &:last-child {
      width: 400px;

      span {
        width: 100px;
      }
    }
  }
}

.page {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.align-c) {
  .cell {
    text-align: center !important;
  }
}
.add-area {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 4px #ccc;
  border-radius: 10px;
  .text{
    display: flex;
    align-items: center;
    span{
      padding-left: 10px;
    }
  }
}
</style>